<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
    <th:block th:include="include :: select2-css"/>

    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!--swiper-->
    <link rel="stylesheet" th:href="@{/dist/libs/swiper/idangerous.swiper2.7.6.css}">
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <link rel="stylesheet" th:href="@{/css/my.css}"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">

    <link rel="stylesheet" th:href="@{/msg-layer/naranja.min.css}">
</head>

<body class="gray-bg">
<!--右侧主体-->
<div class="index-contentPart">
    <div class="index-main">

        <div class="row rowNew">
            <!--左侧天气&通知开始-->
            <div class="left col-sm-4 col-md-4 col-lg-3">
                <!--天气列表-->
                <div class="weather-list clearfix">
                    <div class="weather-item col-sm-12 col-md-6 w-idx01">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <!--<div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon01.png}"></div>
                                <div class="w-name fr">晴转阴</div>-->
                                <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=52&icon=1&num=1" width="100%" height="25" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                            </div>
                            <div class="w-item-btm">
                                <p id="Countdown">16:35:22</p>
                                <p id="c-date">2019-10-11</p>
                            </div>
                        </div>
                    </div>
                    <div class="weather-item col-sm-12 col-md-6 w-idx02">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon02.png}"></div>
                                <div class="w-name fr">空气温度</div>
                            </div>
                            <div class="w-item-btm" th:text="${sensor.Channel1}">32<span class="unit">℃</span></div>
                        </div>
                    </div>
                    <div class="weather-item col-sm-12 col-md-6 w-idx03">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon03.png}"></div>
                                <div class="w-name fr">空气湿度</div>
                            </div>
                            <div class="w-item-btm color03" th:text="${sensor.Channel4}">71.7<span class="unit">%</span>
                            </div>
                        </div>
                    </div>
                    <div class="weather-item col-sm-12 col-md-6 w-idx04">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon04.png}"></div>
                                <div class="w-name fr">风速</div>
                            </div>
                            <div class="w-item-btm color04" th:text="${sensor.Channel7}">1.4<span class="unit">m/s</span></div>
                        </div>
                    </div>
                    <div class="weather-item col-sm-12 col-md-6 w-idx05">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon05.png}"></div>
                                <div class="w-name fr">风向</div>
                            </div>
                            <div class="w-item-btm color05" th:text="${sensor.Channel8}">西南</div>
                        </div>
                    </div>
                    <div class="weather-item col-sm-12 col-md-6 w-idx06">
                        <div class="w-main">
                            <div class="w-item-top clearfix">
                                <div class="w-icon fl"><img alt="" th:src="@{/dist/img/weather-icon06.png}"></div>
                                <div class="w-name fr">雨量</div>
                            </div>
                            <div class="w-item-btm color06" th:text="${sensor.Channel17}">50<span class="unit">mm</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--重要通知-->
                <div class="notice-part">
                    <div class="notice-title clearfix">
                        <div class="title-left fl">
                            <div><i class="icon"><img alt=""
                                                      th:src="@{/dist/img/notice-title-icon.png}"></i><span>重要通知</span>
                            </div>
                        </div>
                        <div class="title-more fr">
                            <a class="more" href="/system/notice/moreInfo">更多>></a>
                        </div>
                    </div>
                    <ul class="notice-list">
                        <li class="notice-item" th:each="n:${notices}" th:attr="notice-id= *{n.noticeId}">
                            <a class="clearfix" th:href="'/system/notice/info/'+${n.noticeId}">
                                <span class="txt"
                                      th:text="${#strings.abbreviate(n.noticeTitle,20)}">明日冷空气，做好保暖...</span>
                                <span class="time"
                                      th:text="${#dates.format(n.createTime, 'yyyy-MM-dd')}">2019年8月12日</span>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <!--左侧天气&通知结束-->

            <!--右侧结束&知识课堂开始-->
            <div class="right col-sm-8 col-md-8 col-lg-9 col-sm-offset-4 col-md-offset-4 col-md-offset-3">
                <!--介绍-->
                <div class="jsnc-indro clearfix">
                    <div class="indro-img col-sm-12 col-md-12 col-lg-8">
                        <!-- banner -->
                        <div class="swiper-container" id="indroImg" style="height: 100%;">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" th:each="pic:${headers}">
                                    <div class="img-outer">
                                        <a th:href="${pic.hUrl == null ?'javascript:void(0);':pic.hUrl}"
                                           target="_blank">
                                            <img th:src="${pic.hCover}" th:alt="${pic.hDesc}">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="indro-part col-sm-12 col-md-12 col-lg-4">
                        <div class="indro-title clearfix">
                            <div class="title-left fl">
                                <div><i class="icon"><img alt=""
                                                          th:src="@{/dist/img/notice-title-icon.png}"></i><span>关于巨山</span>
                                </div>
                            </div>
                            <div class="title-more fr">
                                <a class="more" href="/system/ncKnowledgeClass/showKC/21">更多>></a>
                            </div>
                        </div>
                        <p class="indro-page" onclick="showJuShanInfo(this)">
                            北京市巨山农场有限公司隶属于北京首农食品集团有限公司，有香山、延庆、海南三个基地，自1949年以来一直肩负着食品供应工作，主要生产绿色有机食品，其中根菜、茎菜、叶菜、花菜、果菜等五大类蔬菜经严格检测，各项指标在同行业率先达到了GB8410-84等水果蔬菜标准，获农业部“绿色食品”标志，并被授予了绿色食品证书，其中...</p>
                    </div>
                </div>


                <!--知识课堂-->
                <div class="jsnc-knowledge">
                    <div class="knowledge-title">
                        <span class="title-txt">知识课堂</span>
                    </div>
                    <!-- 种植知识-->
                    <div class="knowledge-sort" th:each="mapEntry,mapStat:${map}">
                        <div class="k-sort-title">
                            <span class="title-txt" th:text="${mapStat.current.key.kcTypeName}">种植知识</span>
                        </div>
                        <div class="k-sort-list clearfix">
                            <div th:attr="doc-id= *{knowClass.kcId}"
                                 class="item-div k-sort-item col-xs-12 col-sm-12 col-lg-6"
                                 th:each="knowClass : ${mapStat.current.value}">
                                <div class="item-main clearfix">
                                    <div class="k-s-item-left col-xs-4" onclick="showKC(this)">
                                        <a><img th:src="${knowClass.pic}"></a>
                                    </div>
                                    <div class="k-s-item-right col-xs-12">
                                        <div class="item-right-main" onclick="showKC(this)">
                                            <div class="title"><a th:text="${knowClass.title}"></a></div>
                                            <div class="page show-detail hidden" id="kcContent"
                                                 th:utext="${knowClass.kcContent}">
                                                为在一定范围内获得最佳秩序，对实际的或潜在的问题制定共同的和重复使用的规则的活动，成为标准化。它包括制定、发布及实施标准的过程。
                                            </div>
                                        </div>
                                        <div class="item-right-btm clearfix">
                                            <div class="btm-auther fl"
                                                 th:text="${knowClass.createBy} + ' | ' + ${#dates.format(knowClass.createTime, 'yyyy-MM-dd')}">
                                                by:张小强 | 2019-06-20
                                            </div>
                                            <div class="btm-more fr">
                                                <a th:id="${knowClass.kctypeId}" onclick="showKCListByKCId(this)">更多</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧结束&知识课堂结束-->

        </div>

    </div>
</div>
<div class="container" style="display: none">
    <div class="row" style="padding:2em 0">
        <div class="col-md-2">
            <button class="btn btn-error" onclick="narn(&#39;log&#39;)">默认（log）</button>
        </div>
        <div class="col-md-2">
            <button class="btn btn-success" onclick="narn(&#39;success&#39;)">成功（success）</button>
        </div>
        <div class="col-md-2">
            <button class="btn btn-warning" onclick="narn(&#39;warn&#39;)">警告（warn）</button>
        </div>
        <div class="col-md-2">
            <button class="btn btn-danger" onclick="narn(&#39;error&#39;)">危险（error）</button>
        </div>
    </div>
</div>

<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js"/>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/dist/libs/swiper/idangerous.swiper.min.js}"></script>

<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/webjars/sockjs-client/1.0.2/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.3/stomp.min.js}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<!--<script th:inline="javascript" th:src="@{/ruoyi/js/main.js}"></script>-->
<script th:src="@{/msg-layer/naranja.js}"></script>

<script th:inline="javascript">
    /*知识详情*/
    function showKC(data) {
        var kcId = $(data).parents('.item-div').attr("doc-id");
        window.location.href = "/system/ncKnowledgeClass/showKC/" + kcId;
    }


    /*巨山简介*/
    function showJuShanInfo() {
        window.location.href = "/system/ncKnowledgeClass/showKC/" + 21;
    }

    /*更多*/
    function showKCListByKCId(data) {
        var kcId = $(data).attr("id");
        window.location.href = "/system/ncKnowledgeClass/listClassRoom?kctypeId=" + kcId;


    }


    $(function () {
        // banner
        new Swiper('#indroImg', {
            loop: true,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2000,
            observer: true,
            observeParents: true,
            autoplayDisableOnInteraction: false
        });

        $('.k-s-item-left').each(function () {
            $(this).siblings(".k-s-item-right").eq(0).height($(this).height() + 22)
        })
        $(window).resize(function () {
            $('.k-s-item-left').each(function () {
                $(this).siblings(".k-s-item-right").eq(0).height($(this).height() + 22)
            })
        });
    });

    $('.show-detail').each(function (i, e) {
        $(e).html(getText($(e).html()));
        $(e).removeClass("hidden")
    })

    var stompClient = null;

    var userId = [[${userId}]]

    var ctx = [[@{
        /}]];


//连接到服务器
        function connect() {
            var socket = new SockJS('/gs-guide-websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                // console.log('Connected: ' + frame);
                //接收服务端发送给/topic/greetings的订阅信息
                stompClient.subscribe('/topic/imsg', function (msg) {
                    // console.log(msg);
                    addmsg(msg);
                    //JSON.parse(greeting.body);//解析json字符串为对象
                });
            });

            //断开连接
            function disconnect() {
                if (stompClient !== null) {
                    stompClient.disconnect();
                }

                //向服务器发送信息
                function sendHello() {
                    stompClient.send("/app/sendimsg", {}, "hello server");
                }

            }

        }

        connect();

        $('.send').click(function () {
            var word = $('.input').val();
            stompClient.send("/app/sendimsg", {}, word);
        });

        function addmsg(msg) {
            // console.log(msg)

            var m = JSON.parse(msg.body);

            var u1 = "," + userId + ",";

            var us = "," + m.userId + ",";

            // console.log(u1 + "---" + us)

            if (m.noticeId && m.deptId == 1) {
                newmsg(m);
            } else if (m.noticeId && us.indexOf(u1) >= 0) {
                newmsg(m)
            }


        }


        function newmsg(m) {
            var str = '<li class="notice-item"  notice-id= "' + m.noticeId + '">' +
                '  <a class="clearfix" href="' + ctx + 'system/notice/info/' + m.noticeId + '">' +
                '   <span class="txt">' + m.noticeTitle + '</span>' +
                '    <span class="time">' + dateFtt(new Date(m.createTime)) + '</span>\n' +
                '     </a>\n' +
                '      </li>'
            $(".notice-list").prepend(str)
            $(".notice-list").find('li:last').remove()
        }

        /*时间更新*/
        function mytime() {
            var a = new Date();
            var b = a.toLocaleTimeString();
            var c = a.toLocaleDateString();
            document.getElementById("c-date").innerHTML = dateFtt(a);
            document.getElementById("Countdown").innerHTML = dateFtt(a, 'hh:mm:ss');
        }

        setInterval(mytime, 1000);

        function narn(type) {
            naranja()[type]({
                title: '新消息提示',
                text: '单击“接受”以创建新通知',
                timeout: 'keep',
                buttons: [{
                    text: '接受',
                    click: function (e) {
                        naranja().success({
                            title: '通知',
                            text: '通知被接受'
                        })
                    }
                }, {
                    text: '取消',
                    click: function (e) {
                        e.closeNotification()
                    }
                }]
            })
        }
</script>
</body>
</html>
